<template>
	<div class="base-content" style="height: 100%;">
		<iframe id="frame" style="width: 100%; height: 100%; border: none;" @load="frameLoad"></iframe>
	</div>
</template>

<script>
	import {
		onMounted,
		nextTick
	} from 'vue'
	export default {
		name: 'IconTool',
		setup() {
			const iconUrl = new URL('../../styles/iconfont/demo_index.html',
				import.meta.url).href
			const democss = new URL('../../styles/iconfont/demo.css',
				import.meta.url).href
			const ifCss = new URL('../../styles/iconfont/iconfont.css',
				import.meta.url).href
			const ifJs = new URL('../../styles/iconfont/iconfont.js',
				import.meta.url).href
			onMounted(() => {
				nextTick(() => {
					document.getElementById('frame').src = iconUrl
				})
			})
			const frameLoad = () => {
				let script = document.createElement('script')
				script.src = ifJs
				script.type = 'text/javascript'

				let link = document.createElement('link')
				link.href = democss
				link.rel = 'stylesheet'
				link.type = 'text/css'

				let link2 = document.createElement('link')
				link2.href = ifCss
				link2.rel = 'stylesheet'
				link2.type = 'text/css'
				document.getElementById('frame').contentWindow.document.getElementsByTagName('head')[0]
					.appendChild(script)
				document.getElementById('frame').contentWindow.document.getElementsByTagName('head')[0]
					.appendChild(link)
				document.getElementById('frame').contentWindow.document.getElementsByTagName('head')[0]
					.appendChild(link2)
			}
			return {
				frameLoad
			}
		}
	}
</script>

<style>
</style>
